<template>
  <div class="page-container">
    <h1>位置点位地图</h1>
    
    <div class="map-wrapper">
      <GoogleMap 
        :api-key="googleApiKey"
        :center="mapCenter"
        :zoom="zoomLevel"
        :markers-data="markers"
      />
    </div>
    
    <button @click="fetchLocations" :disabled="isLoading">
      {{ isLoading ? '加载中...' : '获取点位数据' }}
    </button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import GoogleMap from '@/components/GoogleMap/GoogleMap.vue'

const googleApiKey = 'AIzaSyD4nSOdcY8A1J8KOz4JRI8mrbLKKwfkTxo' // 替换为你的API密钥
const mapCenter = ref({ lat: 39.9042, lng: 116.4074 }) // 北京中心点
const zoomLevel = ref(12)
const markers = ref([])
const isLoading = ref(false)

// 模拟API请求获取点位数据
const fetchLocations = async () => {
  try {
    isLoading.value = true
    // 这里替换为你的实际API调用
    // const response = await fetch('your-api-endpoint')
    // const data = await response.json()
    
    // 假设返回的数据格式为：
    const data = [{ id: 1, name: "位置1", lat: 39.9042, lng: 116.4074, info: "详细信息..." }]
    markers.value = data.map(item => ({
      latitude: item.lat,
      longitude: item.lng,
      title: item.name,
      info: item.info
    }))
  } catch (error) {
    console.error('获取点位数据失败:', error)
    alert('获取数据失败，请重试')
  } finally {
    isLoading.value = false
  }
}
</script>

<style scoped>
.page-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.map-wrapper {
  height: 600px;
  margin: 20px 0;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

button {
  padding: 10px 20px;
  background-color: #4285f4;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: #3367d6;
}

button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}
</style>